<template>
	<div class="side">
		<!-- 地址选择 -->
		<div class="side_main">
			<vHead class="main_header" title="选择收获地址"  @back="$emit('sback')">
				<span class="add" @click="$router.push('/mine/address/add')">新增地址</span>
			</vHead>
			<!-- 地址选择 -->
			<div class="main_search flex" @click="show.city=true">
				<!-- 如果选择了城市，就显示选择的城市名称，否则显示请选择城市 -->
			    <span class="search_name">
			      	{{currentCity?currentCity : '请选择城市'}}
			    </span>
			    <i class="iconfont icon-xiala"></i>
			    <!-- 搜索框 -->
			    <p class="search_input">
			        <i class="iconfont icon-icon_sousuo"></i>
			        <input type="text" class="input" placeholder="请输入地址">
			    </p>
			</div>
			<!-- 当前地址 -->
      <div class="now-addr">
        <p class="p-spacing">当前定位</p>
        <!-- 定位 -->
        <div class="location p-spacing clearfix">
          <p>广东省深圳市荷坳路99号</p>
          <div class="locate-btn">
            <span class="iconfont icondingwei"></span>
            <span>重新定位</span>
          </div>
        </div>
      </div>

      <!-- 收货地址 -->
      <div class="recv-addr">
        <p class="p-spacing">我的地址</p>
        <ul class="add-list">
          <li class="item p-spacing" v-for="(item,i) in addrInfo" :key="i">
            <div class="personal">
              <span class="name">{{item.name}}</span>
              <span class="gender">{{item.gender===1 ? "先生" : "女士"}}</span>
              <span class="mobile">{{item.mobile}}</span>
            </div>
            <p class="addr">{{item.baseAddr + item.detailAddr}}</p>
          </li>
        </ul>
      </div>
		</div>
		
		
		<!-- 城市选择 -->
		<!-- 隐藏城市列表 -->
		<div class="side_city" v-show="show.city">
			<!-- 城市选择头部 -->
			<!-- 返回收货地址 -->
			<vHead class="city_header" title="城市选择"  @back="show.city=false">
				<!-- 搜索城市 -->
				<div class="city_search flex">
					<i class="iconfont icon-icon_sousuo"></i>
		
					<input class="cinput" v-model="searchStr" type="text" placeholder="请输入城市名或者拼音"/>
				</div>
			</vHead>
			
			<!-- 搜索时显示的列表 -->
			<div class="search_box" v-show="searchStr">
				<ul>
					  <li class="add_list" v-for="(item,i) in citySearch"  @click="selectCity(item)" :key="i">
						{{item.name}}
					  </li>
				</ul>
			</div>
			
			<!-- 城市列表 -->
			<div class="city_mian" v-show="!searchStr">
			   <!-- 当前城市 -->
				<div class="current_box">
					<span>当前城市</span>
					<li class="add_list">
						{{currentCity}}
					</li>
				</div>
				<van-index-bar :sticky="false">
				 <ul v-for="(items,k,i) in cityName" :key="i">
					  <van-index-anchor :index="k" />
					  
					  <li class="add_list" v-for="(item,j) in items" @click="selectCity(item)" :key="j">
					    {{item.name}}
					  </li>
				 </ul>
				</van-index-bar>
			</div>
			
		</div>
	</div>
</template>

<script>
	import vHead from '@comps/header/Header.vue'
	import {getCurrentInstance,toRefs,reactive} from 'vue'
	import { IndexBar, IndexAnchor } from 'vant';
	import cityModel from './js/cityModel.js'
	export default{
		components:{
			vHead,
			[IndexBar.name]: IndexBar,
			[IndexAnchor.name]: IndexAnchor,
		},
		setup(){
		const {cityList,cityName,searchStr,citySearch,selectCity,currentCity,show, addrInfo} =cityModel();

			
			return{
				cityList,
				searchStr,
				citySearch,
				cityName,
				selectCity,
				currentCity,
        show,
        addrInfo
			}
		}
	}
</script>

<style lang="scss">
	.side{
    height: 100%;
    z-index: 999;
		// background-color: #fff;
		.side_main,.side_city{
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
			height: 100%;
			background-color: #f4f4f4;
		}
		.side_main{
			.main_header{
				.add{
					position: absolute;
          right: 0.266666rem;
					top: 0;
					line-height: 1.466666rem;//55
					color: #fff;
					font-size: 0.426666rem;//16
				}
			}
      // 搜索模块开始
      .main_search {
        align-items: center;
        background-color: #fff;
        padding: 0.32rem;//12

        .search_name {
          width: 1.066666rem;//40px
          text-align: center;
          font-size: 0.32rem;//12
          // 字体超出隐藏
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .search_input {
          padding: 0.16rem;//6
          margin-left: 0.266666rem;//10
          background-color: #f4f4f4;

          .iconfont {
            font-size: 0.32rem;//12
            font-weight: 600;
            color: #999;
          }

          .input {
            padding: 0.133333rem;//5
            width: 6.666666rem;//250
            color: #999;
          }
        }

        // 搜索框结束
                // 当前地址
      .new_add {
        margin: 0.266666rem;//10
        font-size: 0.373333rem;//14
      }
      }
      // 当前地址
      .now-addr {
        height: 2.121053rem;
        p {
          padding-top: 0.394737rem;
          padding-bottom: 0.294737rem;
        }
        .location {
          height:1.052632rem;
          background-color:#fff;
          p { 
            font-size: 0.421053rem; 
            font-weight:700;
            float: left;
          }
          // 定位按钮
          .locate-btn {
            float: right;
            color: #2395ff;
            height:1.052632rem;
            line-height: 1.052632rem;
            * {
              vertical-align: middle;
              margin-left: 0.157895rem;
            }
          }
        }
        
      }
      // 收货地址
      .recv-addr {
        p {
          clear: both;
          padding-top: 0.394737rem;
          padding-bottom: 0.294737rem;
        }
        .add-list {
          .item {
            height: 1.710526rem;
            background-color:#fff;
            padding-top: 0.494737rem;
            color:#444;
            span {
              margin-right: 0.131579rem;
            }
            .name {
              color: #000;
              font-size: 0.394737rem;
              font-weight:700;
            }
            .addr {
              padding-top: 0.1rem;
            }
          }
        }
      }

		}
		
		.side_city{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			.city_header{
				padding-bottom: 0.026666rem;
			}
			.city_search{
				margin: 0.266666rem 0.933333rem;
				background-color: #fff;
				padding: 0.266666rem 0.533333rem;
				border-radius:2.666666rem;
				color:#999;
				font-size: 0.32rem;
				font-weight: 600;
			}
			.cinput{
				background-color: #fff;
				width: 90%;
				color:#999;
				margin-left: 0.213333rem;
			}
		}
	  /**列表模块**/
    .add_list {
      height: 0.4rem;//15
      background-color: #fff;
      padding: 0.4rem;//15
      font-size: 0.373333rem;//14
      border-bottom: 1px solid rgba(166, 166, 166, 0.1);
    }
    .search_box{
      /* 自适应填满剩余空间 */
      flex-grow: 1;
      flex-shrink: 1;
      overflow: auto;
    }
    .current_box{
      span{
        line-height:35px;
        padding: 15px;
        font-size: 14px;
        color: #999;
      }
    }
		
	}
</style>
